<script lang="ts" setup>
import IndexFooter from "../Common/IndexFooter.vue";
import QueryCard from "./QueryCard.vue";
import { queryCardList } from "../../../utils/ts/query";
import { ref } from "vue";
import { useRouter } from "vue-router";

const queryList = ref(queryCardList);
const router = useRouter()

const toResult = () => {
  if (localStorage.getItem("random")) {
    localStorage.removeItem("random")
    router.push({
      path: '/index/queryResult'
    })
  } else {
    localStorage.setItem("random", "1")
    router.push({
      path: '/index/queryResultSuccess'
    })
  }

}
</script>
<template>
  <div class="flex flex-col items-center pt-10 bg-slate-200 pb-20">
    <div class="w-20">
      <img src="/index/transLogo.png" alt="" />
    </div>
    <p class="md:text-6xl text-4xl mt-5 tracking-widest">正版授权查询系统</p>

    <div class="md:w-5/10">
      <div class="flex w-full rounded bg-white">
        <input class="w-full border-none bg-transparent px-4 py-1 text-gray-400 outline-none focus:outline-none"
          type="search" name="search" placeholder="输入域名查询..." />
        <button type="submit" class="m-2 rounded bg-blue-600 px-4 py-2 text-white" @click="toResult">
          <svg class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
            viewBox="0 0 56.966 56.966" style="enable-background: new 0 0 56.966 56.966" xml:space="preserve"
            width="512px" height="512px">
            <path
              d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
          </svg>
        </button>
      </div>
    </div>

    <div class="flex flex-col items-center w-full">
      <p class="mt-20 md:text-4xl text-2xl text-center">为什么要获得商业授权</p>

      <div class="flex flex-wrap items-center justify-center md:justify-between max-w-375 w-5/10">
        <QueryCard v-for="(item, index) in queryList" :key="'query' + index" :item="item" />
      </div>
    </div>
  </div>

  <IndexFooter />
</template>
<style lang="scss" scoped></style>
